<template>
  <!-- 页面顶部说明 -->
   <pre-head></pre-head>
  <div class="table-wrapper" >
  <!-- 自定义内容 ： https://element-plus.youqua.cn/zh-CN/component/dialog.html -->
    <div class="btns">
      <el-button type="primary" :icon="Plus" size="small" @click="open(null)">新增</el-button>
    </div>
  <!-- 展示已经添加权限的用户信息，基础表格：https://element-plus.youqua.cn/zh-CN/component/table.html -->
  <!-- 标签为后端返回字段 ：https://apifox.com/apidoc/shared-205c93aa-6b50-4a1a-85be-b93dc5304443/api-197520308-->
    <el-table :data="tableData.list" style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="name" label="昵称" />
        <el-table-column prop="permissionName" label="菜单权限" width="500px" />
        <!-- 插槽（Slot）机制 -->
        <el-table-column plabel="操作">
          <template #default="scope">
            <el-button type="primary" @click="open(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
  

    <!-- 分页功能：附加功能：https://element-plus.youqua.cn/zh-CN/component/pagination.html -->
    <div class="pagination-info">
    <el-pagination
      v-model:current-page="paginationData.pageNum"
      size="samll"
      :background="false"
      layout="total, prev, pager, next"
      :total="tableData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
  </div>


  <!--v-model  用于在表单输入、选择和其他输入元素上创建双向数据绑定-->
  <el-dialog
    v-model="dialogFormVisable"
    :before-close="beforeClose"
    title="添加权限"
    width="500"
  >
  <!-- 做校验新添加rules -->
    <el-form
      ref="formRef"
      label-width="100px"
      label-position="left"
      :model="form"
      :rules="rules"
    >
      <!-- 隐藏表单用于生成id -->
      <el-form-item v-show="false" prop="id">
        <el-input v-model="form.id"></el-input>
      </el-form-item>

      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请填写权限名称"></el-input>
      </el-form-item>

      <el-form-item label="权限" prop="permissions">
        <!-- 树节点的选择：https://element-plus.youqua.cn/zh-CN/component/tree.html -->
        <el-tree
          ref="treeRef"
          style="max-width: 600px;"
          :data="perissionData"
          node-key="id"
          show-checkbox
          :default-expanded-keys="[2]"
          :default-checked-keys="defaultKeys"
        />
      </el-form-item>
    </el-form>
<!-- 插槽（Slot）机制 -->
    <template #footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="comfirm(formRef)">确认</el-button>
        </div>
    </template>

  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import { userGetMenu,userSetMenu,menuList } from "../../../api";
import { fa, tr } from "element-plus/es/locales.mjs";
// 如果不导入element-plus包是不会显示icon图标的
import {Plus} from  '@element-plus/icons-vue';

// 注意表单校验大小写
const rules = reactive({
    name: [{required:true, trigger:'blur', message:'请输入权限名称' }]
})

const treeRef = ref()
const formRef = ref()


// 处理分页
const handleSizeChange = (val) =>{
  paginationData.pageSize = val
}
const handleCurrentChange = (val) =>{
  paginationData.pageNum = val
}

// extTick 是 Vue 提供的一个 API，用于在 DOM 更新之后执行代码。当你的数据发生变化时，Vue 会异步更新 DOM。如果你希望在 DOM 更新完成后再执行某些操作，就可以使用 nextTick
const open = (rowData = {}) => {
  dialogFormVisable.value = true
  // 确保 rowData.permissions 存在并且是一个数组
  const permissions = Array.isArray(rowData.permissions) ? rowData.permissions : [];
  // 弹窗打开form生成是异步
  nextTick(() => {
    if(rowData){
      Object.assign(form,{id:rowData.id,name:rowData.name})
      treeRef.value.setCheckedKeys(permissions)
    }
  })
}

const comfirm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      // 获取表单信息checkbox并序列化传递给后端
      const permissions  = JSON.stringify(treeRef.value.getCheckedKeys())
      console.log(permissions,'permissions')
      userSetMenu({name:form.name,permissions,id:form.id}).then(({data}) =>{
          console.log(data)
          getListData()
          beforeClose()
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const tableData = reactive({
    list:[],
    total:0
})

const paginationData = reactive ({
    pageNum:1,
    pageSize:10
})
// 权限列表信息获取
const getListData = () => {
  menuList(paginationData).then(({data}) => {
    const {list,total} = data.data
    tableData.list = list
    tableData.total = total
  })
}

// 默认不展示
// 当 ref 包装的值发生变化时，Vue 的响应式系统会自动更新相关的视图
const dialogFormVisable = ref(false);

// perissionData中的权限数据应该在页面加载的时候直接显示，此处需要调用后端接口获取数据
onMounted(()=>{
    userGetMenu().then(({data}) => {
        console.log(data,'data')
        perissionData.value = data.data
    })
    getListData()
})

const perissionData = ref([])


// 关闭弹窗回调
const beforeClose = ()=>{
    dialogFormVisable.value = false
    // 当前接口已经有两个地方使用一个是打开一个是编辑所以需要在每次关闭时候清楚数据
    // 原理类似于递归调用数据
    // 重置表单
    formRef.value.resetFields()
    // tree选择重置
    treeRef.value.setCheckedKeys(defaultKeys.value)
}

// 默认选中权限
const defaultKeys =ref([4, 5]); // 使用 ref 定义为响应式数据

const form = reactive({
  id:"",
  name: "",
  permissions: ""
});
</script>

<style scoped>
/* 让树组件宽度继承父容器 */
.el-tree {
  width: 100%;
}

/* 可选：如果想进一步调整表单项的样式 */
.el-form-item {
  /* 例如，设置一个最小宽度 */
  min-width: 300px;
}


/* 容器样式 */
.table-wrapper {
  background-color: white; /* 设置背景颜色为白色 */
  padding: 5px; /* 内边距 */
  margin-bottom: 20px; /* 外边距，与分页器之间留出一些空间 */
}


</style>
